<template>
  <div class="analysis-page">
    <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" :ec="highPressEC" />
    <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" :ec="lowPressEC" />
    <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" :ec="bloodGlucoseEC" />
  </div>
</template>

<script>
import * as echarts from '../ec-canvas/echarts'
import { getHealReportLog } from './api'
import { mapGetters } from 'vuex'
let chartLineH
let chartLineL
let chartLineB
let devicePixelRatio
export default {
  data() {
    return {
      highPressEC: {
        onInit: function(canvas, width, height) {
          // 初始化echarts元素，绑定到全局变量，方便更改数据
          chartLineH = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio
          })
          canvas.setChart(chartLineH)
          return chartLineH
        }
      },
      lowPressEC: {
        onInit: function(canvas, width, height) {
          // 初始化echarts元素，绑定到全局变量，方便更改数据
          chartLineL = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio
          })
          canvas.setChart(chartLineL)
          return chartLineL
        }
      },
      bloodGlucoseEC: {
        onInit: function(canvas, width, height) {
          // 初始化echarts元素，绑定到全局变量，方便更改数据
          chartLineB = echarts.init(canvas, null, {
            width,
            height,
            devicePixelRatio
          })
          canvas.setChart(chartLineB)
          return chartLineB
        }
      }
    }
  },
  computed: mapGetters(['system']),
  onLoad() {
    devicePixelRatio = this.system.pixelRatio
    console.log(devicePixelRatio)
    this.getData()
  },
  methods: {
    getData() {
      getHealReportLog().then(res => {
        setTimeout(() => {
          this.createEchartsData(chartLineH, res.hparr, '近30日收缩压', 'mmHg')
          this.createEchartsData(chartLineL, res.lparr, '近30日舒张压', 'mmHg')
          this.createEchartsData(chartLineB, res.bgarr, '近30日血糖值', 'mmol/L')
        }, 1000)
      })
    },
    createEchartsData(chart, data, title, unit) {
      const xData = []
      const yData = []
      data.map(function(item) {
        xData.push(item.date)
        yData.push(item.val)
      })

      chart.setOption({
        title: {
          text: title,
          top: 0,
          left: 20
        },
        xAxis: {
          type: 'category',
          data: xData

        },
        yAxis: {
          type: 'value',
          name: '单位:' + unit
        },
        tooltip: {
          trigger: 'axis'
        },
        series: [
          {
            data: yData,
            type: 'line'
          }
        ]
      })
    }
  }
}
</script>

<style lang="less">
@import './index.less';
</style>
